<template>
  <el-drawer v-model="visiable" title="选课学生信息" size="90%" class="drawer">
    <div id="content">
      <globle-linear-border>
        <el-card class="searchBox">
          <el-form :inline="true">
            <el-form-item label="学号">
              <el-input v-model="pageQuery.otherParams.student.studentId" placeholder="输入学生学号搜索" clearable />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="pageQuery.otherParams.student.name" placeholder="输入学生姓名搜索" clearable />
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="pageQuery.otherParams.student.sex" placeholder="选择学生性别搜索" clearable>
                <el-option label="男" value="1" />
                <el-option label="女" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="学院">
              <el-input v-model="pageQuery.otherParams.student.college" placeholder="输入学生学院搜索" clearable />
            </el-form-item>
            <el-form-item label="专业">
              <el-input v-model="pageQuery.otherParams.student.major" placeholder="输入学生专业搜索" clearable />
            </el-form-item>
            <el-form-item label="班级">
              <el-input v-model="pageQuery.otherParams.student.stuClass" placeholder="输入学生班级搜索" clearable />
            </el-form-item>
            <el-form-item>
              <section>
                <el-button type="primary" icon="Search" @click.stop="getPageInfo">搜 索</el-button>
                <el-button type="warning" icon="RefreshRight" @click.stop="reset">重 置</el-button>
                <el-button type="warning" icon="Upload" @click="onExpose">导出数据</el-button>
              </section>
            </el-form-item>
          </el-form>
        </el-card>
      </globle-linear-border>
      <globle-linear-border style="margin-top: 20px">
        <el-card class="mainBox">
          <span v-if="tableData.rows">
            <el-table :border="true" stripe ref="tableRef" :data="tableData.rows" cell-class-name="table-cell" header-cell-class-name="table-header-cell">
              <el-table-column label="年级">
                <template #default="scope">{{ scope.row.student.grade + '级' }}</template>
              </el-table-column>
              <el-table-column property="student.studentId" label="学号" width="110" show-overflow-tooltip />
              <el-table-column property="student.name" label="姓名" width="90" />
              <el-table-column label="性别">
                <template #default="scope">{{ scope.row.student.sex == 1 ? '男' : '女' }}</template>
              </el-table-column>
              <el-table-column property="student.qq" label="QQ号" width="140" />
              <el-table-column property="student.phone" label="手机号" width="140" />
              <el-table-column property="student.college" label="学院" width="180" />
              <el-table-column property="student.major" label="专业" />
              <el-table-column property="student.stuClass" label="班级" width="200">
                <template #default="scope">{{ scope.row.student.stuClass }}</template>
              </el-table-column>
              <el-table-column property="createTime" label="选课时间" />
            </el-table>
            <el-pagination v-model:currentPage="pageQuery.pageParams.pageNum"
              v-model:page-size="pageQuery.pageParams.pageSize" :page-sizes="pageSizeOption" :background="true"
              :small="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.totalSize"
              @size-change="onSizeChange" @current-change="onCurrentChange" />
          </span>
        </el-card>
      </globle-linear-border>
      <export-dialog ref="exportDialogRef"></export-dialog>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ICourse,  ICoSePageParams, IPageRes } from '../../../../type';
import { useAPI } from '../../../../request/api';
import { ElTable } from 'element-plus';
import ExportDialog from '../../../teacher/myCourse/components/ExportDialog.vue';  //共用teacher/myCourse的导出选课学生信息弹窗

const rowData = ref({} as ICourse) ;
const visiable = ref(false); //add batchAdd update
const api = useAPI();
const exportDialogRef = ref();
const pageSizeOption = [5, 10, 15, 20];
const tableData = ref({} as IPageRes);
const tableRef = ref<InstanceType<typeof ElTable>>();
  const pageQuery = reactive<ICoSePageParams>({
  otherParams: {
    createTime: '',
    student: { 
      studentId: '',
      name: '',
      sex: '',
      stuClass: '',
      college: '',
      major: ''
     },
    teacher: {},
    course: { courseId: '' } //open方法中设置
  },
  pageParams: {
    pageNum: 1,
    pageSize: pageSizeOption[1],
    sortField: '',
    sortType: '',
  },
});


const open = async (row: ICourse) => {
  rowData.value = row;
  visiable.value = true;
  pageQuery.otherParams.course.courseId = row.id  
  getPageInfo();
};

const reset = () => {
  pageQuery.otherParams = {
    createTime: '',
    student: { 
      studentId: '',
      name: '',
      sex: '',
      stuClass: '',
      college: '',
      major: ''
     },
    teacher: {},
    course: { courseId: rowData.value.id } 
  }
  getPageInfo();
}

//导出
const onExpose = () => {
  exportDialogRef.value.open(rowData.value);
};

//分页大小
const onSizeChange = (val: number) => {
  pageQuery.pageParams.pageSize = val;
  pageQuery.pageParams.pageNum = 1;
  getPageInfo();
};

//分页页码
const onCurrentChange = (val: number) => {
  pageQuery.pageParams.pageNum = val;
  getPageInfo();
};

const getPageInfo = async () => {
  const res = await api.coSelection.findPage(pageQuery);
  tableData.value = res.data;
};

defineExpose({ open });
</script>

<style lang="scss" scoped>
 #content {
  height: 100%;
  padding: 14px 32px;

  .searchBox {
    &-item {
      margin-right: 10px;
    }

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
    }

    section {
      display: flex;
    }

    :deep(.el-input__wrapper) {
      width: 200px;
    }
  }

  .mainBox {
    :deep(.el-checkbox__inner) {
      background-color: var(--main-color);
      transition: background 0.3s ease;
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: var(--active-color);
      transition: background 0.3s ease;
    }
  }
}
</style>
